<!DOCTYPE html>
<htm style="height: 100%;">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="__ROOT__/Public/Admin/shortcut icon" href="favicon.ico">
    <link href="__ROOT__/Public/Admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__ROOT__/Public/Admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__ROOT__/Public/Admin/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="__ROOT__/Public/Admin/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="__ROOT__/Public/Admin/css/default.css" rel="stylesheet">
    <link href="__ROOT__/Public/Admin/css/official.css" rel="stylesheet">
    <link href="__ROOT__/Public/Admin/css/animate.css" rel="stylesheet">
	<link href="__ROOT__/Public/Admin/js/plugins/layui/css/layui.css" rel="stylesheet">

    <style>
		.active{
			padding: 6px 15px;
		}
		.list-group-item:first-child {
		    border-top-left-radius: 1px;
		    border-top-right-radius: 1px;
		}
		.col-sm-6 {
    		width: 70%;
		}

    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height:100%; ">
    <div class="ibox float-e-margins" style="height:100%;">
    	<h3 style="text-align:center;width: 100%; margin: 10px;"><?php if($BPName == "null"){echo '查无流程';}else{echo $BPName;}?>
    	</h3>
        <div class="ibox-content" style="height:100%;">
        	<table width="100%" height="40%">
        		<tr>
        			<td width="30%" valign="top" style="padding-left:10%;">
        				<div style="border: 0px solid #e7e7e7; overflow: auto; height:100%;" class="CatalogList">
        				</div>
        			</td>
        			<td width="70%" valign="top" >
        				<div style="border: 1px dashed #e7e7e7;margin-left:6%; margin-right:10%; text-align: center; height: 100%;" >
        		<p style="margin-top:12%" class="previewa"> 附件预览区域</p>
				<a href="#" target="_blank" class="preview" ><img src="" height="180" width="300" style="display:none;"></a>
        				</div>
        			</td>
        		</tr>
        	</table>
        	<br>
            <table width="100%" height="50%">
        		<tr>
        			<td width="20%" valign="top" style="padding-left:10%; ">
        				<div style="overflow-x: auto; overflow-y: auto; height: 100%; width:100%">
        					<table class="table table-bordered table-striped text-center" data-mobile-responsive="true" width="100%" >
			                    <tbody class="tbody">

			                    </tbody>
		                	</table>
        				</div>
        			</td>
        			<td width="8%" valign="top" >
        				<div style="border: 0px solid #e7e7e7; height: 100%; margin-left:10%;margin-right:20%; text-align: center;" >
        					<button type="button" class="layui-btn layui-btn-normal" id="testList" style="margin-top:20%; display: none;" onclick="UPFile()">添加附件</button>
        				</div>
        			</td>
        		</tr>
        	</table>
		</div>
    </div>
</div>

<script type="text/javascript" src="__ROOT__/Public/Admin/js/jquery.min.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/layer/layer.min.js"></script>
<script>
	var PRID = '{$PRID}';
	var TID = '{$TID}';
	var BALID = 0;
	
	//上传附件弹窗
	function UPFile(){parent.layeropenUPFile(TID);}
	
	//查询当前流程的附件目录
	$.post("{:U('Admin/TaskProcess/getCatalogListByPRID')}",{"TID":TID,"PRID":PRID},function(result){
		if(!result) return;
		var html = "";
		for(var k in result){
			html += "<a href='#' onclick='showFJlist("+result[k].ID+")' class='list-group-item'>"+result[k].Name+"</a>";
		}
		$(".CatalogList").html("");
		if(html == "") html = "<tr><td colspan='5' class='text-center'>查无附件目录</td></tr>";
		$(".CatalogList").append(html);
		$('.CatalogList').find('a:first').click();  //显示第一个目录的附件
	});
	
	//显示 指定 目录 的附件列表
	function showFJlist(BALID){
		parent.BALID = BALID = BALID;
		$.post("{:U('Admin/TaskProcess/getFJListByPRID')}",{"BALID":BALID,"TID":TID,"PRID":PRID},function(result){
			var html = "";
			for(var k in result.list){
				html += "<tr id='trid"+result.list[k].ID+"'><td>"+result.list[k].Name+"</td><td>"+result.list[k].UserName+"</td><td>"+result.list[k].AddTime+"</td><td><a class='edit-user label label-primary' isPicture='"+result.list[k].isPicture+"' id='"+result.list[k].ID+"' url='"+result.list[k].SavePath+"' fileName='"+result.list[k].Name+"' onclick='FJpreview(this);'>预览</a>&nbsp;&nbsp;&nbsp;<a class='delete-user label label-danger js-ajax-delete ishow' id='"+result.list[k].ID+"' href='javascript:deletFJ("+result.list[k].ID+")'>删除</a></td></tr>";
			}
			$(".tbody").html("");
			if(html == "") html = "<tr><td colspan='5' class='text-center'>查无附件</td></tr>";
			$(".tbody").append(html);
			if(result.IsInput == 1 || result.IsInput == 2){
				$("#testList").css("display","");
			}else{
				$("#testList").css("display","none");
				$(".ishow").css("display","none");
			}
		});
	}
	
	//附件预览
	 function FJpreview(This){
	 	var id = $(This).attr("id");
	 	var isPicture = $(This).attr("isPicture");
	 	var url = $(This).attr("url");
	 	var fileName = $(This).attr("fileName");
	 	if(isPicture == 1){
	 		$(".preview").attr("href",url);
	 		var img = "<img src='"+url+"' height='190' width='300'>";
	 		$(".preview").html(img)
	 		$(".previewa").css("display","none");
	 	}else{
	 		$(".previewa").css("display","");
	 		$(".previewa").text("附件需要点击下载预览");
	 		$(".preview").html(fileName);
	 		$(".preview").css("background-color","pink");
	 		$(".preview").hover(function(){
	 			$(".preview").css("background-color","yellow");
	 		},function(){
    			$(".preview").css("background-color","pink");

	 		});
	 		$(".preview").attr("href", "javascript:FJdownload("+id+");");
	 	}
	 }
	
	//附件下载
	function FJdownload(id){
		window.open("{:U('Admin/TaskProcess/EnclosureDownload')}"+"&ID="+id);
	}
		
	//删除附件
	function deletFJ(ID){
		layer.confirm('你确定要删除吗？',{
		    btn: ['确定','取消'], //按钮
		    shade: false //不显示遮罩
		}, function(index){
				layer.close(index);
				$.post("{:U('Admin/TaskProcess/EnclosureDelet')}",{"ID":ID},function(result){
					if(result.status == 1){
						layer.msg(result.info);
						$("#trid"+ID).remove();
					}
				})
			}, function(index){
		});
	}
</script>
</body>
</html>